<template>
    <div :class="alert_class" :style="alert_style">
        <slot></slot>
    </div>
</template>
<script>
export default {
    name:'g-alert',
    props:{
        "alert_class":{
            type:String,
            default:'primary_alert'
        },
        "alert_style":{
            type:String,
            default:'margin:10px 0'
        }
    },
    setup(props){
        return {
            props
        }
    }

}
</script>
<style>
    .default_alert{
        padding: 15px;
        background-color: var(--default-background);
        border: 1px solid var(--default-border);
        border-radius: 5px;
        color: var(--default-font-color);
    }
    .success_alert{
        padding: 15px;
        background-color: var(--success-background);
        border: 1px solid var(--success-border);
        border-radius: 5px;
        color: var(--success-font-color);
    }
    .primary_alert{
        padding: 15px;
        background-color: var(--primary-background);
        border: 1px solid var(--primary-border);
        border-radius: 5px;
        color: var(--primary-font-color);
    }
    .warning_alert{
        padding: 15px;
        background-color: var(--warning-background);
        border: 1px solid var(--warning-border);
        border-radius: 5px;
        color: var(--warning-font-color);
    }
    .error_alert{
        padding: 15px;
        background-color: var(--error-background);
        border: 1px solid var(--error-border);
        border-radius: 5px;
        color: var(--error-font-color);
    }
</style>